{#继承base。html#}
{% extends 'common/base.html' %}

{#改变title#}
{% block title %}
    index
{% endblock %}

{#增加主页内容#}
{% block main %}
    {% if user %}
    <div id="page-wrapper">
        <div class="header">
            <h1 class="page-header">
                主页
            </h1>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Dashboard</a></li>
                <li class="active">Data</li>
            </ol>

        </div>
        <div id="page-inner">

            <!-- /. ROW  -->
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-7">
                    <div class="cirStats">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="card-panel text-center">
                                    <h4>温度</h4>
                                    <div class="easypiechart" id="easypiechart-blue" data-percent="82"><span
                                            class="percent">82%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="card-panel text-center">
                                    <h4>湿度</h4>
                                    <div class="easypiechart" id="easypiechart-red" data-percent="46"><span
                                            class="percent">46%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="card-panel text-center">
                                    <h4>Customers</h4>
                                    <div class="easypiechart" id="easypiechart-teal" data-percent="84"><span
                                            class="percent">84%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="card-panel text-center">
                                    <h4>Sales</h4>
                                    <div class="easypiechart" id="easypiechart-orange" data-percent="55"><span
                                            class="percent">55%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/.row-->

            </div>


            <div class="row">
                <div class="col-md-4 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="card-action">
                            <b>预警提示信息</b>
                        </div>
                        <div class="card-image">
                            <div class="collection">
                                <a href="#!" class="collection-item">Red<span class="new badge red"
                                                                              data-badge-caption="red">4</span></a>
                                <a href="#!" class="collection-item">Blue<span class="new badge blue"
                                                                               data-badge-caption="blue">4</span></a>
                                <a href="#!" class="collection-item"><span class="badge">1</span>Alan</a>
                                <a href="#!" class="collection-item"><span class="new badge">4</span>Alan</a>
                                <a href="#!" class="collection-item">Alan<span class="new badge blue"
                                                                               data-badge-caption="blue">4</span></a>
                                <a href="#!" class="collection-item"><span class="badge">14</span>Alan</a>
                                <a href="#!" class="collection-item">Custom Badge Captions<span class="new badge"
                                                                                                data-badge-caption="custom caption">4</span></a>
                                <a href="#!" class="collection-item">Custom Badge Captions<span class="badge"
                                                                                                data-badge-caption="custom caption">4</span></a>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="col-md-8 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="card-action">
                            <b>用户列表</b>
                        </div>
                        <div class="card-image">
                            <ul class="collection">
                                <li class="collection-item avatar">
                                    <i class="material-icons circle green">track_changes</i>
                                    <span class="title">Title</span>
                                    <p>First Line <br>
                                        Second Line
                                    </p>
                                    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                                </li>
                                <li class="collection-item avatar">
                                    <i class="material-icons circle">folder</i>
                                    <span class="title">Title</span>
                                    <p>First Line <br>
                                        Second Line
                                    </p>
                                    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                                </li>
                                <li class="collection-item avatar">
                                    <i class="material-icons circle green">track_changes</i>
                                    <span class="title">Title</span>
                                    <p>First Line <br>
                                        Second Line
                                    </p>
                                    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                                </li>
                                <li class="collection-item avatar">
                                    <i class="material-icons circle red">play_arrow</i>
                                    <span class="title">Title</span>
                                    <p>First Line <br>
                                        Second Line
                                    </p>
                                    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                                </li>
                            </ul>
                        </div>
                    </div>


                </div>
            </div>
            <!-- /. ROW  -->
            <div class="fixed-action-btn horizontal click-to-toggle">
                <a class="btn-floating btn-large red">
                    <i class="material-icons">menu</i>
                </a>
                <ul>
                    <li><a class="btn-floating red"><i class="material-icons">track_changes</i></a></li>
                    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
                    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
                    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
                </ul>
            </div>

            <footer><p>All right reserved. Template by: <a
                    href="https://webthemez.com/admin-template/">WebThemez.com</a></p>


            </footer>
        </div>
    {% else %}
         <div id="page-wrapper">
		  <div class="header">
                        <h1 class="page-header">
                           欢迎来到智能监控系统
                        </h1>

		</div>
            <div id="page-inner">
                <div class="row" style="display: none">
                    <div class="col-md-6 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="card-action">
                            Bar Chart
                        </div>
                        <div class="card-content">
                            <div id="morris-bar-chart"></div>
                        </div>
                    </div>
                </div>
                      <div class="col-md-6 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="card-action">
                            Area Chart
                        </div>
                        <div class="card-content">
                            <div id="morris-area-chart"></div>
                        </div>
                    </div>
                </div>
           </div>
                 <!-- /. ROW  -->
                <div class="row">

                               <div class="col-md-12 col-sm-12 col-xs-12" style="display: none">
                    <div class="card">
                        <div class="card-action">
                            本日温度与湿度数据
                        </div>
                        <div class="card-content">
                            <div id="morris-line-chart"></div>
                        </div>
                    </div>
                </div>
                      <div class="col-md-12 col-sm-12 col-xs-12" >
                    <div class="card">
                        <div class="card-action">
                           <h2>你可以在登录后使用本系统</h2>
                        </div>
                        <div class="card-content">
							<div id="morris-donut-chart"></div>
                        </div>
                    </div>
                </div>

           </div>
                 <!-- /. ROW  -->
				 <footer><p>感谢您的使用</p></footer>
				</div>
             <!-- /. PAGE INNER  -->
            </div>
        </div>
    {% endif %}

        <!-- /. PAGE INNER  -->
    </div>
{% endblock %}